<template>
    <div id="app">
        <!-- <div v-for="item, index in showTable" :key="index">{{ item }}</div> -->
        <button @click="updata">上一页</button>
        <!-- <button v-for="item,index in btnNum" @click="ck(index)" :class="currentPage==item?'choose':''">{{item}}</button> -->
        <button v-for="item, index in btnNum" :key="index" @click="ck(index)" :class="{ 'choose': currentPage == item }">{{
            item
        }}</button>
        <button @click="downdata">下一页</button>
    </div>
</template>

<script>
import bus from "../JS/bus";
export default {
    data() {
        return {
            dataTable: [],//数据源
            showTable: [],//用户展示的数据
            pageSzie: 2,//每条的页数
            currentPage: 1,//当前的页码
            btns: '',//btnd的个数
            // classId:1
        }
    },
    // 挂在数据
    mounted() {
        // this.countBtns()
        this.showData()
        bus.$on("send", (val) => {
            this.dataTable = val;
        });
        bus.$on("send2", (val) => {
            this.pageSzie = val;
        });
        bus.$emit("send1", this.showTable);
    },
    methods: {
        // 计算button按钮的个数
        countBtns() {
            // this.btns = Math.ceil(this.dataTable.length / this.pageSzie)
        },
        // 展示数据
        showData() {
            this.showTable = this.dataTable.slice(this.pageSzie * (this.currentPage - 1), this.pageSzie * this.currentPage);
        },
        // btn点击事件
        ck(index) {
            this.currentPage = index + 1
            this.showData()
            bus.$emit("send1", this.showTable);
        }, // 下一页
        downdata() {
            if (this.currentPage < this.btnNum) {
                this.currentPage++;
                this.showData()
            } 
            // else {
            //     alert('到顶了')
            // }
            bus.$emit("send1", this.showTable);
        },
        //上一页
        updata() {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.showData()
            } 
            // else {
            //     alert('到底了')
            // }
             bus.$emit("send1", this.showTable);
        }
    },
    // 监听
    watch: {
        // dataTable: {
        //     handler(newValue, oldValue) {
        //         // 不能用oldValue，因为所展示的旧值为undefined
        //         this.btns = Math.ceil(newValue.length / this.pageSzie)
        //     },
        //     immediate:true
        // }
    },
    computed: {
        btnNum() {
            return Math.ceil(this.dataTable.length / this.pageSzie)
        }
    }
}
</script>

<style lang="less" scoped>
.choose {
    background-color: aqua;
    color: rgb(96, 195, 212);
}
</style>